<template>
	<view class="body">
		<view class="cneter" v-if="show == true">
			<view class="btn">
				<button @tap="editInfo" type="default" size="mini" plain="true" style="margin: 10px;">修改用户信息</button>
			</view>

			<view class="items">
				<view class="left">头像</view>
				<view class="right">
					<image class="icon" :src="data.icon"></image>
				</view>
			</view>
			<view class="items">
				<view class="left">用户名</view>
				<view class="right">
					<view class="text">{{data.username}}</view>
				</view>
			</view>
			<view class="items">
				<view class="left">昵称</view>
				<view class="right">
					<view class="text">{{data.nickname}}</view>
				</view>
			</view>
			<view class="items">
				<view class="left">手机号</view>
				<view class="right">
					<view class="text">{{data.phone}}</view>
				</view>
			</view>

			<view class="bottom">
				<view class="logout" @tap="logout">退出登录</view>
			</view>

		</view>
		<!-- 2 -->
		<view class="cneter" v-else>
			<view class="btn">
				<button type="default" size="mini" plain="true" style="margin: 10px;">修改用户信息</button>
			</view>

			<view class="items">
				<view class="left">头像</view>
				<view class="right">
					<button @tap="updateImg" v-show="imgSrc == '' " type="default" size="mini" plain="true" style="margin: 10px;">上传头像</button>
					<image class="icon" v-show="imgSrc !== ''" :src="imgSrc" mode=""></image>
				</view>
			</view>
			<view class="items">
				<view class="left">用户名</view>
				<view class="right">
					<input type="text" v-model="data.username" />
				</view>
			</view>
			<view class="items">
				<view class="left">昵称</view>
				<view class="right">
					<input type="text" v-model="data.nickname" />
				</view>
			</view>
			<view class="items">
				<view class="left">手机号</view>
				<view class="right">
					<input type="text" v-model="data.phone" />
				</view>
			</view>

			<view class="bottom">
				<view class="logout" @tap="update">更新</view>
			</view>
		</view>





	</view>
</template>

<script>
	import {
		updateMemberInfo
	} from "../../../api/my/index.js"
	import baseUrl from "../../../api/baseUrl.js"
	import mix from "../../../mixins/index.js"
	export default {
		mixins: [mix],
		data() {
			return {
				data: {},
				show: true,
				imgSrc: ''
			};
		},
		onLoad() {
			if (!this.checkLogins()) {
				return
			}
			var value = uni.getStorageSync("userInfo")
			console.log(value)
			this.data = value
		},
		methods: {
			editInfo() {
				this.show = !this.show
			},
			logout() {
				uni.clearStorage("userInfo")
				uni.navigateTo({
					url: "../login/login"
				})
			},
			//上传头像
			updateImg() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success(res) {
						var files = res.tempFilePaths[0]
						uni.uploadFile({
							url: baseUrl + "/lejuClient/login/uploadAvatar",
							filePath: files,
							name: "file",
							success(result) {
								_this.imgSrc = JSON.parse(result.data).data.fileUrl
							}
						})
					}
				})
			},
			update() {
				updateMemberInfo(this.data).then(res => {
					console.log(res)
					if (res.success == true) {
						uni.showToast({
							title: "更新成功，请重新登录",
							duration: 1500
						})
						setTimeout(function() {
							uni.navigateTo({
								url: "../login/login"
							})
						}, 1500)

					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		height: 100vh;
		background-color: #F1ECE7;

		.btn {
			float: right;
		}

		.items {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			line-height: 47px;
			padding: 5px 15px;
			border-bottom: 1px solid #e5e5e5;

			.left {
				color: #494949;
			}

			.right {
				padding-right: 30px;

				.icon {
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}

				.text {
					color: #a1a1a1;
				}

				input {
					text-align: right;
				}
			}
		}

		.bottom {
			width: 100%;
			height: 50px;
			position: fixed;
			bottom: 20%;
			display: flex;
			justify-content: center;
			align-items: center;

			.logout {
				width: 185px;
				height: 44px;
				line-height: 44px;
				font-size: 16px;
				border-radius: 8px;
				text-align: center;
				color: #fff;
				background-color: #1c4b47;
			}
		}

	}
</style>
